<template>
  <div class="dice-container">
    <div class="dice" :class="{ 'rolling': isRolling }">
      <div class="dice-face front" :data-value="value">
        <div class="dot" v-for="n in getDots(value)" :key="n"></div>
      </div>
      <div class="dice-face back" data-value="6">
        <div class="dot" v-for="n in getDots(6)" :key="n"></div>
      </div>
      <div class="dice-face right" data-value="3">
        <div class="dot" v-for="n in getDots(3)" :key="n"></div>
      </div>
      <div class="dice-face left" data-value="4">
        <div class="dot" v-for="n in getDots(4)" :key="n"></div>
      </div>
      <div class="dice-face top" data-value="2">
        <div class="dot" v-for="n in getDots(2)" :key="n"></div>
      </div>
      <div class="dice-face bottom" data-value="5">
        <div class="dot" v-for="n in getDots(5)" :key="n"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DiceCube',
  props: {
    value: {
      type: Number,
      default: 1
    },
    isRolling: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    /**
     * 获取骰子上点的位置数组
     * @param {Number} value - 骰子点数值（1-6）
     * @returns {Array} - 点的位置数组
     */
    getDots(value) {
      return value;
    }
  }
}
</script>

<style scoped>
.dice-container {
  display: inline-block;
  margin: 15px;
  perspective: 800px;
}

.dice {
  position: relative;
  width: 70px;
  height: 70px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  cursor: pointer;
}

.dice:hover {
  transform: rotateX(20deg) rotateY(20deg);
}

.dice.rolling {
  animation: rolling 0.8s infinite;
}

@keyframes rolling {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  25% { transform: rotateX(90deg) rotateY(45deg); }
  50% { transform: rotateX(180deg) rotateY(90deg); }
  75% { transform: rotateX(270deg) rotateY(135deg); }
  100% { transform: rotateX(360deg) rotateY(180deg); }
}

.dice-face {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: white;
  border: 2px solid #4a8bc5;
  border-radius: 10px;
  display: grid;
  grid-template-areas: 
    "a . c"
    "e g f"
    "d . b";
  justify-content: space-around;
  align-content: space-around;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #3a7bd5;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
}

/* 点的位置 */
.dice-face[data-value="1"] .dot:nth-child(1) { grid-area: g; }

.dice-face[data-value="2"] .dot:nth-child(1) { grid-area: a; }
.dice-face[data-value="2"] .dot:nth-child(2) { grid-area: b; }

.dice-face[data-value="3"] .dot:nth-child(1) { grid-area: a; }
.dice-face[data-value="3"] .dot:nth-child(2) { grid-area: g; }
.dice-face[data-value="3"] .dot:nth-child(3) { grid-area: b; }

.dice-face[data-value="4"] .dot:nth-child(1) { grid-area: a; }
.dice-face[data-value="4"] .dot:nth-child(2) { grid-area: b; }
.dice-face[data-value="4"] .dot:nth-child(3) { grid-area: d; }
.dice-face[data-value="4"] .dot:nth-child(4) { grid-area: c; }

.dice-face[data-value="5"] .dot:nth-child(1) { grid-area: a; }
.dice-face[data-value="5"] .dot:nth-child(2) { grid-area: b; }
.dice-face[data-value="5"] .dot:nth-child(3) { grid-area: g; }
.dice-face[data-value="5"] .dot:nth-child(4) { grid-area: d; }
.dice-face[data-value="5"] .dot:nth-child(5) { grid-area: c; }

.dice-face[data-value="6"] .dot:nth-child(1) { grid-area: a; }
.dice-face[data-value="6"] .dot:nth-child(2) { grid-area: c; }
.dice-face[data-value="6"] .dot:nth-child(3) { grid-area: d; }
.dice-face[data-value="6"] .dot:nth-child(4) { grid-area: b; }
.dice-face[data-value="6"] .dot:nth-child(5) { grid-area: e; }
.dice-face[data-value="6"] .dot:nth-child(6) { grid-area: f; }

/* 骰子各面的位置 */
.front {
  transform: translateZ(35px);
}

.back {
  transform: rotateY(180deg) translateZ(35px);
}

.right {
  transform: rotateY(90deg) translateZ(35px);
}

.left {
  transform: rotateY(-90deg) translateZ(35px);
}

.top {
  transform: rotateX(90deg) translateZ(35px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(35px);
}
</style> 